<!--  -->
<template>
  <div class="msite">
      <!-- <HeaderTop title="珍馐坊"></HeaderTop> -->
      <!-- banner图及搜索框 -->
      <section class="banner">
        <!-- <img src="./img/banner1.png" alt=""> -->
        <!-- <van-swipe :autoplay="4000" :height="210">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.imageUrl" />
            <img :src="image.imageUrl" alt="">
          </van-swipe-item>
        </van-swipe> -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in images" :key="index">
              <img :src="img.imageUrl" alt="" @click="goToGoodsDetail(img.goodsId)">
            </div>
          </div>
        </div>
        <div class="search">
          <van-search style="background:#fff;text-align:center" placeholder="新品上架" v-model="searchValue" @search="onSearch"/>
        </div>
      </section>
      <section class="container">
        <!-- 优惠券 -->
        <section class="coupon" v-if="couponList.length">
          <div class="coupon_title">
            <img src="./img/lingquan.png" alt="">
          </div>
          <div class="coupon_list">
            <div class="coupon_item" v-for="(coupon,index) in couponList" :key="index" @click="getCoupon(coupon.id)">
              <div class="coupon_limit">
                <h1 class="top">{{coupon.deductionMoney}}</h1>
                <p class="bottom">满{{coupon.minConsume}}可用</p>
              </div>
              <img src="./img/youhuiquan.png" alt="">
            </div>
          </div>
        </section>

        <!-- 主题专区 -->
        <section class="theme-area">
          <div class="theme_area_title">
            <img src="./img/b2.png" alt="">
          </div>
          <div class="theme_area_list">
            <ul>
              <li>
                <img src="./img/Combinedhealthtea.png" alt="" @click="gotoGoodsList(1)">
              </li>
              <li>
                <img src="./img/Singlehealthtea.png" alt="" @click="gotoGoodsList(2)">
              </li>
              <li>
                <img src="./img/Healthcake.png" alt="" @click="gotoGoodsList(3)">
              </li>
              <li>
                <img src="./img/Healthfood.png" alt="" @click="gotoGoodsList(4)">
              </li>
              <li>
                <img src="./img/Otherhealthregimens.png" alt="" @click="gotoGoodsList(5)">
              </li>
            </ul>
          </div>
        </section>

        <!-- 活动专区 -->
        <section class="activity-area">
          <div class="activity_area_title">
            <img src="./img/b1.png" alt="">
          </div>
          <div class="activity_area_list">
            <!-- 新品上架 -->
            <div class="newGoodsList">
              <img class="bt1" src="./img/bt1.png" alt="" @click="moreNew">
              <div class="activity_area_img">
                <a href="javascript:;" v-for="(item,index) in newGoods" :key="index" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}" >
                  <!-- <img :src="item.coverImg" alt=""> -->
                </a>
              </div>
              <a class="activity_area_more" href="javascript:;">
                <img src="./img/more.png" alt="" @click="moreNew">
              </a>
            </div>
            <!-- 热卖专区 -->
            <div class="hotGoodsList">
              <a class="activity_area_more" href="javascript:;">
                <img src="./img/more.png" alt="" @click="moreHot">
              </a>
              <div class="activity_area_img">
                <a href="javascript:;" v-for="(item,index) in hotGoods" :key="index" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                  <!-- <img :src="item.coverImg" alt=""> -->
                </a>
              </div>
              <img class="bt1" src="./img/bt2.png" alt="" @click="moreHot">
            </div>
          </div>
        </section>

        <!-- 推荐商品 -->
        <section class="recommend">
          <div class="recommend_title">
            <img src="./img/b3.png" alt="">
          </div>
          <div class="recommend_list_box">
            <ul class="recommend_list_ul">
              <li class="recommend_list_li" v-for="(item,index) in recommendGoods" :key="index">
                <a href="javascript:;">
                  <div class="top-wrapper">
                    <div class="top" @click="goToGoodsDetail(item.id)" :style="{backgroundImage:'url(' + item.coverImg + ')'}">
                      <!-- <img :src="item.coverImg" alt=""> -->
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="bottom_left">
                      <h3>{{item.goodsName}}</h3>
                      <p>{{item.profile}}</p>
                    </div>
                    <div class="bottom_right">
                      <h2>
                        <!-- <span>{{item.price}}</span> -->
                        <span class="span1">￥{{item.price.toString().split(".")[0]}}</span>
                        <span class="span2" v-if="item.price.toString().split('.')[1]">.{{item.price.toString().split(".")[1]}}</span>
                      </h2>
                      <button @click="bayGoods(item.id)">立即购买</button>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </section>
        <!--  -->
      </section>
  </div>
</template>

<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import {MessageBox} from 'mint-ui'
import Swiper from 'swiper' //引入swiper库
import 'swiper/dist/css/swiper.min.css' //引入swiper的css样式
export default {
  data () {
    return {
      userId:null,
      token:'',
      searchValue:'',
      images:[],
      themeArea:[], //主题专区
      newGoods:[], //新品上市
      hotGoods:[], //热销专区
      recommendGoods:[], //推荐商品
      searchGoods:[], //模糊查询
      couponList:[], //优惠券列表
    };
  },

  // components: {
  //   HeaderTop,
  // },

  computed: {
    ...mapState(['userInfo'])
  },
  watch:{
    images(value){
      console.log('轮播图')
      this.$nextTick(()=>{
        new Swiper('.swiper-container',{
          loop:true, //循环轮播
          autoplay:true,
          pagination:{
            el:'.swiper-pagination'
          }
        })
      })
    }
    },
  created(){
    console.log('aaa', localStorage.getItem('userInfo'))
    console.log(this.userInfo)
    if(localStorage.getItem('wx')){
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      console.log('msite页面userInfo',userInfo)
      this.$store.dispatch('recordUserInfo',userInfo)
      localStorage.getItem('userId')
      localStorage.getItem('token')
    }
    this.initGoods()
    this.initCoupon()
    this.reqBanner()
  },
  methods: {
    gotoGoodsList(id){
      this.$router.push({path:'/goodslist', query:{s:id,moduleId:2}})
    },
    // 点击立即购买
    async bayGoods(id){
      if(localStorage.getItem('token')){
        const params = {
          userId: localStorage.getItem('userId'),
          token: localStorage.getItem('token'),
          goodsId: id,
          num: 1
        }
        const result = await this.API.reqAddTbCart(params)
        this.$store.state.shopIdArray = [result.retData]
          console.log('vuex第一次存',this.$store.state.shopIdArray)
          this.$router.push({
              path: '/confirmorder',
              // zml - 立即购买递交参数
              params: {
                  isDel: true
              }
          })
      }else{
        MessageBox({
            title:'温馨提示',
            message:'您还没有登录,先去登录吧~',
            showCancelButton:true,
            confirmButtonText:'登录',
            cancelButtonText:'取消'
        }).then(action => {
            if(action == 'confirm'){
                console.log(action)
                localStorage.setItem('token', '')
                localStorage.setItem('userId', '')
                localStorage.setItem('userInfo','')
                this.$store.dispatch('logout',{userId:this.userId,token:this.token})
                this.$router.replace('/login')
            }else{
                console.log(action)
            }
        })
      }
    },
    async reqBanner(){
      // const userId = this.userInfo.userInfo.id
      // const token = this.userInfo.token
      // console.log('轮播图参数', {userId,token})
      const result = await this.API.reqBannerImg()
      console.log('轮播图',result)
      if(result.retCode === '000'){
        this.images = result.retData
        console.log('轮播图',this.images)
      }
    },
    onSearch(id){
      // console.log(this.searchValue)
      this.$router.push({path:'/goodslist', query:{s:id,moduleId:5}})
    },
    async initGoods(){
      let result1 = await this.API.reqGoodsList({moduleId:2,property:1,choose:1,num:1,size:5}) // 主题专区
      let result2 = await this.API.reqGoodsList({moduleId:3,property:1,choose:1,num:1,size:3}) // 新品专区
      let result3 = await this.API.reqGoodsList({moduleId:4,property:1,choose:1,num:1,size:3}) // 热销专区
      let result4 = await this.API.reqGoodsList({moduleId:2,property:1,choose:1,num:1,size:4}) // 推荐商品
      this.themeArea = result1.retData
      console.log('主题专区数据',this.themeArea)
      this.newGoods = result2.retData
      this.hotGoods = result3.retData
      this.recommendGoods = result4.retData
      // console.log('价格',typeof((this.recommendGoods[0].price).toString()))
      // console.log('价格2',typeof((this.recommendGoods[0].price)+''))
    },
    async initCoupon(){
      // alert(1)
      // if(this.userInfo.token){
      // alert(2)
        // const userId = this.userInfo.userInfo.id
        // console.log('打印', this.userInfo.userInfo.id) 
        // const token = this.userInfo.token
      let result = await this.API.reqCanGetCouponList()
      console.log('优惠券',result.retData)
      this.couponList = result.retData
      console.log('优惠券列表',this.couponList)
      // }
    },
    goToGoodsDetail(id){
      console.log('商品id',id)
      this.$router.push({path:'/goodsdetail', query:{id:id}})
    },
    // 领取优惠券
    async getCoupon(couponId){
      console.log('token',localStorage.getItem('token'))
      if(localStorage.getItem('token')){
        const userId = this.userInfo.userInfo.id
        const token = this.userInfo.token
        const result = await this.API.reqGetCoupon({userId,token,couponId})
        console.log(result)
        if(result.retCode == '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: '领取成功'
          // })
          return
        }
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          return
        }
      }else{
        MessageBox({
          title:'温馨提示',
          message:'您还没有登录,先去登录吧~',
          showCancelButton:true,
          confirmButtonText:'登录',
          cancelButtonText:'取消'
        }).then(action => {
          if(action == 'confirm'){
            console.log(action)
            localStorage.setItem('token', '')
            localStorage.setItem('userId', '')
            localStorage.setItem('userInfo','')
            this.$store.dispatch('logout',{userId:this.userId,token:this.token})
            this.$router.replace('/login')
          }else{
            console.log(action)
          }
        })
      }
    },

    moreNew(){
      console.log('更多新品')
      this.$router.push({path:'/goodslist', query:{moduleId:3,s:1}})
    },
    moreHot(){
      console.log('更多热销')
      this.$router.push({path:'/goodslist', query:{moduleId:4,s:1}})
    }
  }
}

</script>
<style lang='stylus'>
.banner
  .search
    .van-search
      background #fff
      border-radius 80px
      .van-field__control
        display inline-block
        text-align center
        margin-left -10px
  .van-swipe 
    height 210px
    .van-swipe__track 
      .van-swipe-item
        img
          width 100%
          height 210px
</style>

<style lang='stylus' scoped>
  @import "../../common/stylus/mixins.styl"
  .msite
    width 100%
    // margin-top 45px
    padding-bottom 0 !important
    .banner 
      position relative
      width 100%
      height 210px
      .swiper-container
        width 100%
        height 210px
        overflow hidden
        img
          width 100%
      .search
        // padding-top 5px
        font-size 14px
        position absolute
        height 42px
        left 25px
        right 25px
        bottom -18px
        border-radius 25px
        z-index 99999
    .container
      padding-top 75px
      margin-top -40px
      width 100%
      background url(./img/bg.png)
      .coupon
        .coupon_title
          display flex
          justify-content center
          align-items center
          img 
            height 36px
        .coupon_list
          display flex
          justify-content space-around
          margin 20px
          margin-top 40px
          .coupon_item
              font-size 12px
              color #145B3E
              position relative
              .coupon_limit
                position absolute
                top -30px
                left 10px
                .top 
                  text-align center
                  font-size 50px
                  font-weight 600 
                .bottom
                  color #437039
                  font-weight bold
                  margin-top 5px
              img 
                height 70px
      .theme-area
        .theme_area_title
          display flex
          justify-content center
          align-items center
          img
            height 30px
        .theme_area_list
          ul
            display flex
            justify-content space-around
            padding 15px 15px
            li
              border-left 1px solid 
              height 95px
              width 20%
              color #437039
              position relative
              &:last-of-type
                border-right 1px solid
              img
                position relative
                width 30px
                left 50%
                margin-left -15px
      .activity-area
        .activity_area_title
          display flex
          justify-content center
          align-items center
          img
            height 30px
        .activity_area_list
          margin-top 13px
          .newGoodsList
            background #145B3E
            height 127px
            display flex
            justify-content space-between
            .bt1
              height 105px
              margin-right 5px
              margin-left 25px
            .activity_area_img
              a
                display inline-block
                width 82px
                height 101px
                margin-top 13px
                margin-right 5px
                overflow hidden
                border-radius 10px
                background-size cover
                background-repeat no-repeat
                background-position center center
                // img 
                //   min-width 82px
                //   min-height 101px
            .activity_area_more
              height 21px
              width 21px
              margin-top 53px
              margin-right 10px
              img 
                width 21px
                height 21px
          .hotGoodsList
            background #145B3E
            height 127px
            display flex
            justify-content space-between
            margin-top 10px
            .bt1
              height 105px
              margin-right 21px
            .activity_area_img
              a
                display inline-block
                width 82px
                height 101px
                margin-top 13px
                margin-right 5px
                overflow hidden
                border-radius 10px
                background-size cover
                background-repeat no-repeat
                background-position center center
                // img 
                //   min-width 82px
                //   min-height 101px
            .activity_area_more
              height 21px
              width 21px
              margin-top 53px
              margin-left 13px
              img 
                width 21px
                height 21px
      .recommend
        .recommend_title
          display flex
          justify-content center
          align-items center
          margin-top 20px
          img
            height 30px
        .recommend_list_box
          margin-top 20px
          padding-bottom 50px
          .recommend_list_ul
            padding 0 20px
            display flex
            justify-content space-between
            flex-wrap wrap
            .recommend_list_li
              margin-bottom 15px
              width 158px
              .top-wrapper
                width 148px
                height 185px
                padding 5px
                border 1px solid #748C32
                .top
                  width 148px
                  height 185px
                  overflow hidden
                  display inline-block
                  background-size cover
                  background-repeat no-repeat
                  background-position center center
                  // img
                  //   min-width 148px
                  //   min-height 185px
              .bottom
                display flex
                justify-content space-between
                margin-top 8px
                font-size 11px
                .bottom_left
                  width 88px
                  h3
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    padding-bottom 3px
                    border-bottom 2px solid #748C32
                    font-size 15px
                    font-weight 600
                    color #000
                  p
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    padding-top 2px
                .bottom_right
                  h2
                    color #145B3E
                    font-weight bold
                    text-align center
                    font-weight bold
                    .span1
                      font-size 18px
                      font-weight bold
                    .span2
                      font-size 10px
                      font-weight bold
                  button
                    font-size 10px
                    margin 0
                    margin-top 3px
                    padding 3px 8px
                    border 1px solid transparent
                    outline none
                    color #ffffff
                    background #748C32
                    border-radius 5px
</style>